<template>
  <div>
    <div class="user-area">
      <div class="title">
        <div class="point"></div>
        <span>下载</span>
      </div>
      <el-form label-position="right"
               label-width="120px">
        <el-form-item label="收据">
          <el-col :span="3">
            <el-upload :action="uploadAction"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       multiple
                       :limit="1"
                       :data="{ receiptUrl: '收据' }"
                       :headers="{ token: getToken() }"
                       :on-exceed="handleExceed"
                       :on-success="uploadSuccess"
                       :file-list="receiptList">
              <el-button size="small"
                         type="primary">上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small"
                       type="primary"
                       @click="downloadReceipt">下载</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="购车交易确认书">
          <el-col :span="3">
            <el-upload :action="uploadAction"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       multiple
                       :limit="1"
                       :data="{ confirmCerUrl: '购车交易确认书' }"
                       :headers="{ token: getToken() }"
                       :on-exceed="handleExceed"
                       :on-success="uploadSuccess"
                       :file-list="confirmCerList">
              <el-button size="small"
                         type="primary">上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small"
                       type="primary"
                       @click="downConfirmCer">下载</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="收款确认函">
          <el-col :span="3">
            <el-upload :action="uploadAction"
                       :on-preview="handlePreview"
                       :on-remove="handleRemove"
                       multiple
                       :limit="1"
                       :data="{ receiptConfirmCerUrl: '收款确认函' }"
                       :headers="{ token: getToken() }"
                       :on-exceed="handleExceed"
                       :on-success="uploadSuccess"
                       :file-list="receiptConfirmCerList">
              <el-button size="small"
                         type="primary">上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="4">
            <el-button size="small"
                       type="primary"
                       @click="downReceiptConfirmCer">下载</el-button>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="foot"></div>
    </div>
  </div>
</template>

<style lang="scss">
.el-upload input {
  display: none;
}
</style>

<script>
import '@/style/info.scss'
import '@/style/common.scss'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken, getUser } from '@/utils/auth'
import { devBaseURL } from '@/utils/http'

export default {
  data() {
    return {
      receiptUrl: null,
      confirmCerUrl: null,
      receiptConfirmCerUrl: null,
      receiptList: [],
      confirmCerList: [],
      receiptConfirmCerList: [],
      uploadAction: devBaseURL + api.SYS_DOWNLOAD_UP
    }
  },
  activated() {
    this.getDownload()
  },
  methods: {
    getToken,
    getDownload() {
      this.$http.get(api.SYS_DOWNLOAD_INFO).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.receiptUrl = res.data.receiptUrl
            this.confirmCerUrl = res.data.confirmCerUrl
            this.receiptConfirmCerUrl = res.data.receiptConfirmCerUrl
          }
        }
      )
    },
    downloadReceipt() {
      if (!this.receiptUrl) {
        this.$msg._message('暂无文件请上传', 'warning')
      } else {
        self.location.href = this.receiptUrl
      }
    },
    downConfirmCer() {
      if (!this.confirmCerUrl) {
        this.$msg._message('暂无文件请上传', 'warning')
      } else {
        self.location.href = this.confirmCerUrl
      }
    },
    downReceiptConfirmCer() {
      if (!this.receiptConfirmCerUrl) {
        this.$msg._message('暂无文件请上传', 'warning')
      } else {
        self.location.href = this.receiptConfirmCerUrl
      }
    },
    handleRemove(file, fileList) {
      // 删除钩子
    },
    handlePreview(file) {
      // 预览钩子
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeUpload(file) {
      // 上传前的钩子
    },
    uploadSuccess(response) {
      // 上传成功的回调函数
      if (response.code === HTTPSUCCESS) {
        this.$msg._message('上传成功', 'success')
        this.getDownload()
      }
    }
  }
}
</script>
